import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '../store'
import { getChannels, setChannelIndex } from '../store/actions/channel'
export default function Channel () {
  const dispatch = useDispatch()
  const { channels, index } = useSelector((state:RootState) => state.channel)
  const changeIndex = (idx: number) => {
    dispatch(setChannelIndex(idx))
  }
  useEffect(() => {
    dispatch(getChannels())
  }, [dispatch, getChannels])
  return (
    <ul className="catagtory">
      {channels.map((it, idx) => (<li onClick={() => changeIndex(idx)} key={it.id} className={idx === index ? 'select' : ''}>{it.name}</li>))}
    </ul>
  )
}
